<template>
  <div class="wap-container enAddTollService" id="container">
    <section v-for="(item,index) in form" class="toll-item mt10 mr10 ml10 bgfff">
      <div class="title">
        <div>项目{{index+1}}</div>
        <div>{{item.serviceType}}</div>
        <div class="arrow"></div>
      </div>
      <ul class="desc pb15">
        <li class="rowflex">
          <div class="c666 desc-title">项目描述</div>
          <div class="desc-content">{{item.serviceType}}</div>
        </li>
        <li class="rowflex" v-if="item.predictTime">
            <div class="c666 desc-title">预计工时</div>
            <div>{{item.predictTime}}</div>
        </li>
        <li class="last-li">
          <div class="rowflex">
            <div class="c666 ">费&#160&#160&#160&#160&#160&#160用</div>
            <div class="ml10">{{item.toll}}元</div>
          </div>
          <div @click="deleteToll(item)">删除<img src="~assets/images3/icon-quxiaoxx@2x.png"/></div>
        </li>
      </ul>
      <!--<div class="status rowflex" v-bind:class="{confirm: item.status !== 1}">-->
        <!--<div class="status-title c666">状态</div>-->
        <!--<div v-if="item.status === 0 || item.status === 3 || item.status === 4 || item.status === 5">已确认</div>-->

        <!--<div v-if="item.status === 1">未确认</div>-->
        <!--<div v-if="item.status === 2">确认不执行</div>-->
      <!--</div>-->
    </section>

    <div class="add-item blue" @click="showTollPopup">
      添加收费项目
    </div>
    <section class="bottom_bar cfff" @click="commitToll()">
      发送给用户确认
    </section>

    <div v-transfer-dom>
      <popup v-model="isShowPop" height="90%" style="background-color: #fff">
        <div class="alert-box">
          <popup-header
            left-text="取消"
            class="addToll-pop-header"
            title="选择收费项目"
            :show-bottom-border="false"
            @on-click-left="showTollPopup"></popup-header>
          <ul>
            <li v-for="item in itemTitleList" @click="chooseToll(item)">{{item.serviceType}}</li>
          </ul>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  import {TransferDom,Popup,PopupHeader} from 'vux'

  export default {
      name: "EnAddTollService",
      components: {Popup,PopupHeader},
      directives: {
        TransferDom
      },
      data() {
        return {
          orderId: '',
          itemTitleList: [],
          form: [],
          newForm: [],
          isShowAlert: false,
          isShowPop: false
        }
      },
      mounted() {
        let id = this.$route.query.orderId
        this.isShowPop = this.$route.query.showPop ? true : false
        let data = {
          charge: true,
          noPage: true
        }
        this.orderId = id

        this.$http.get('/work/api/flowNode',{params: data}).then(res=>{   //流程节点
          this.itemTitleList = res.data.data
          console.log(this.itemTitleList)
        })

        // this.$http.get('/work/api/serviceitem/?workOrderId='+this.orderId).then(res=>{   // 服务项目
        //   this.form = res.data.data.rows
        //   console.log(res.data)
        // })
      },
      methods: {
        showTollPopup: function () {
          this.isShowPop = !this.isShowPop
        },
        chooseToll: function (item) {
          item.status = 1
          this.form.push(item)
          this.newForm.push(item)
          this.isShowPop = false
        },
        deleteToll: function(item) {
          this.form.remove(item)
        },
        commitToll: function () {
          if (this.form.length < 1){
            return false
          }
          for (var i = 0; i < this.form.length; i++){
            this.form[i].workOrder = {id: this.orderId}
          }
          this.$http.post('/work/api/serviceitem/'+this.orderId+'/engineer',this.form).then(res=>{
            console.log(this.form)
            this.$router.push({path: '/engineer/enWorkingOrder/', query: {orderId : this.orderId}})
          })
        }
      }
    }
</script>

<style lang="less">

  .enAddTollService {
    font-size: 0.15rem;
    padding-bottom: 1rem;

    .toll-item {
      padding-top: 0.08rem;
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
    }
    .title {
      padding: 0 0.15rem 0 0.1rem;
      display: flex;
      height: 0.35rem;
      line-height: 0.35rem;
      font-size: 0.15rem;
      justify-content: space-between;
      align-items: center;
    }
    .arrow {
      background: url("~assets/images2/icon_zuojian@2x.png") no-repeat;
      background-size: 100%;
      width: 0.06rem;
      height: 0.1rem;
    }
    .desc {
      padding: 0 0.1rem;
      border-top: solid 1px #ebebeb;
    }
    .desc li {
      margin-top: 0.12rem;
      line-height: 0.18rem;
    }
    .last-li{
      display: flex;
      justify-content: space-between;
      img {
        width: 0.2rem;
        margin-left: 0.1rem;
        vertical-align: sub;
      }
    }

    .desc-title {
      width: 0.7rem;
    }
    .desc-content {
      width: 2.5rem;
    }
    .desc .time {
      width: 50%;
    }
    .status {
      padding: 0 0.1rem;
      border-top: solid 1px #ebebeb;
      height: 0.43rem;
      line-height: 0.43rem;
    }
    .status-title {
      padding-left: 0.18rem;
      background: url("~assets/images2/icon_zhuangtaizz@2x.png") left center no-repeat;
      background-size: 0.13rem 0.14rem;
      width: 0.7rem;
    }
    .confirm {
      color: #42a3df;
    }
    .confirm .status-title {
      background: url("~assets/images2/icon_zhuangtai@2x.png") left center no-repeat;
      background-size: 0.13rem 0.14rem;
    }
    .add-item {
      float: right;
      font-size: 0.12rem;
      height: 0.24rem;
      line-height: 0.24rem;
      margin-top: 0.15rem;
      padding-left: 0.29rem;
      padding-right: 0.1rem;
      background: url('~assets/images2/icon_tianjiafeiyong@2x.png') no-repeat;
      background-size: auto 100%;
    }
    .bottom_bar {
      width: 100%;
      background: #42a3fd;
      line-height: 0.43rem;
      font-size: 0.15rem;
      text-align: center;
    }
    .new-item {
      padding: 0 0.1rem;
    }
  }
  .alert-box {
    background: #fff;
    width: 100%;
    bottom: 0;
    .vux-popup-header.addToll-pop-header{
      position: fixed;
      width: 100%;
    }
  }

  .alert-box .alert-title {
    position: fixed;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.43rem;
    line-height: 0.43rem;
    padding: 0 0.1rem;
  }
  .close {
    width: 0.16rem;
    height: 0.16rem;
    background: url("~assets/images2/icon_quxiao@2x.png") no-repeat;
    background-size: 100%;
  }
  .yes {
    width: 0.18rem;
    height: 0.13rem;
  }
  .alert-box ul {
    padding-top: 0.43rem;
    overflow-y: auto;
    text-align: center;
    font-size: 0.13rem;
  }
  .alert-box ul li {
    height: 0.43rem;
    border-top: solid 1px #eee;
    line-height: 0.43rem;
  }


</style>
